<template>
  <div class="task-container">
    <h1 class="font-bold text-3xl text-blank-200 mb-8">课程管理-课程分类</h1>
    <!-- 搜索和过滤器 -->
    <div class="task-filters">
      <div class="search-bar">
        <input
          class="text"
          id="search-input"
          placeholder="搜索课程..."
          v-model="searchText"
        />
      </div>
      <div class="filter-select">
        <select id="status-filter" v-model="statusFilter">
          <option value="all">所有状态</option>
          <option value="completed">已结课</option>
          <option value="in-progress">进行中</option>
          <option value="pending">预播</option>
        </select>
        <select id="priority-filter" v-model="priorityFilter">
          <option value="all_categories">课程类别</option>
          <option value="education">教育类</option>
          <option value="science">科学类</option>
          <option value="nature">自然类</option>
          <option value="physical_education">体育类</option>
          <option value="skill_improvement">技能提升类</option>
        </select>
      </div>
    </div>
    <!-- 任务列表表格 -->
    <table style="margin-left: 170px;">
      <thead>
        <tr>
          <th>课程名称</th>
          <th>课程类型</th>
          <th>课程状态</th>
          <th>课程价格</th>
          <th>截止时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="task in filteredTasks" :key="task.name">
          <td>{{ task.name }}</td>
          <td>{{ task.priority }}</td>
          <td>{{ task.status.replace('-', ' ') }}</td>
          <td>{{ task.price }}</td>
          <td>{{ task.dueDate }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tasks: [
        { name: "趣味在线数学之旅", status: "in-progress", priority: "education", price: "50", dueDate: "2024-12-30" },
        { name: "魅力英语在线学堂", status: "in-progress", priority: "education", price: "50", dueDate: "2024-12-30" },
        { name: "探索物理在线实验室旅", status: "in-progress", priority: "education", price: "9.9", dueDate: "2024-12-30" },
        { name: "高效办公软件在线精通课", status: "in-progress", priority: "skill_improvement", price: "9.9", dueDate: "2024-12-30" },
        { name: "创意绘画在线工作坊", status: "in-progress", priority: "skill_improvement", price: "9.9", dueDate: "2024-12-30" },
        { name: "魅力舞蹈在线工作室", status: "in-progress", priority: "physical_education", price: "9.9", dueDate: "2024-12-30" },
        { name: "趣味体育游戏在线挑战", status: "in-progress", priority: "physical_education", price: "9.9", dueDate: "2024-12-30" },
        { name: "奇妙自然探索在线之旅", status: "in-progress", priority: "nature", price: "9.9", dueDate: "2024-12-30" },
        { name: "野外生存技能在线训练营", status: "in-progress", priority: "nature", price: "50", dueDate: "2024-12-30" },
        { name: "星空奥秘在线观测", status: "in-progress", priority: "nature", price: "9.9", dueDate: "2024-12-30" },
        { name : "未来科技在线展望", status: "in-progress", priority: "science", price: "9.9", dueDate: "2024-12-30" },
        { name: "宇宙科学在线探秘", status: "in-progress", priority: "science", price: "9.9", dueDate: "2024-12-30" },
        { name: "宇宙科学在线探秘", status: "in-progress", priority: "science", price: "9.9", dueDate: "2024-12-30" },
        { name: "生物科学在线发现", status: "in-progress", priority: "science", price: "9.9", dueDate: "2024-12-30" },
        { name: "线上音乐欣赏与创作", status: "in-progress", priority: "skill_improvement", price: "9.9", dueDate: "2024-12-30" },
        { name: "美食烹饪在线课堂", status: "in-progress", priority: "skill_improvement", price: "9.9", dueDate: "2024-12-30" },
        { name: "摄影艺术在线大师课", status: "in-progress", priority: "skill_improvement", price: "9.9", dueDate: "2024-12-30" },
        { name: "亲子共读在线时光", status: "in-progress", priority: "education", price: "9.9", dueDate: "2024-12-30" },
        { name: "亲子手工在线乐园", status: "in-progress", priority: "education", price: "9.9", dueDate: "2024-12-30" },
        { name: "家庭教育在线指南", status: "in-progress", priority: "education", price: "50", dueDate: "2024-12-30" },
        { name: "在线职场沟通技巧提升课", status: "in-progress", priority: "education", price: "9.9", dueDate: "2024-12-30" },
        { name: "项目管理在线进阶班", status: "in-progress", priority: "skill_improvement", price: "9.9", dueDate: "2024-12-30" },
        { name: "新媒体运营在线实战课", status: "in-progress", priority: "skill_improvement", price: "9.9", dueDate: "2024-12-30" }
      ],
      searchText: "",
      statusFilter: "all",
      priorityFilter: "all_categories"
    };
  },
  computed: {
    filteredTasks() {
      return this.tasks.filter(task => {
        const matchesStatus = this.statusFilter === "all" || task.status === this.statusFilter;
        const matchesPriority = this.priorityFilter === "all_categories" || task.priority === this.priorityFilter;
        const matchesSearch = this.searchText === "" || task.name.toLowerCase().includes(this.searchText.toLowerCase());
        return matchesStatus && matchesPriority && matchesSearch;
      });
    }
  }
};
</script>
<style>
/* 全局样式 */
body {
  font-family: Arial, sans-serif;
  background-color: white; /* 将 body 背景色改为白色 */
  margin: 0; /* 去除 body 的 margin */
  padding: 0; /* 去除 body 的 padding */
  color: #333;
}
h1 {
  color: #4A90E2;
  text-align: center;
}
.task-container {
  max-width: 1280px;
  margin-left: 170px;
  width: 100%; /* 占满父元素宽度 */
  padding: 30px; /* 调整内边距 */
  background: #a5c69523;
  border-radius: 8px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}/* 搜索和过滤 */
.task-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  width: 100%; /* 修改为 100% */
}
.search-bar {
  align-self: center; /* 添加此行使搜索框在垂直方向上与父元素中心对齐 */
}
.filter-select {
  align-self: center; /* 添加此行使过滤器选择框在垂直方向上与父元素中心对齐 */
}
/* 表格样式 */
table {
  border-collapse: collapse;
  margin-top: 10px;
  text-align: center;
  width: 945px;
}
table,
th,
td {
  border: 1px solid #e0e4e7;
}
th,
td {
  padding: 12px;
  text-align: center;
}
th {
  background-color: #f2f4f7;
  color: #555;
}
</style>